<template>
  <div class="main-container login-container">
    <div class="main-container-main__title main-container-main__title--spacing-small">
      贝博代理端
    </div>
    <el-radio-group class="main-container__header" shadow block v-model="currentLoginType">
      <el-radio-button label="account">
        <svg-icon icon-class="user" :type="currentLoginType === 'account' ? 'white' : 'black'"></svg-icon>账户名登录
      </el-radio-button>
      <el-radio-button label="mobile">
        <svg-icon icon-class="mobile" :type="currentLoginType === 'mobile' ? 'white' : 'black'"></svg-icon>手机快捷登录
      </el-radio-button>
    </el-radio-group>

    <div class="main-container__main">
      <mobile-login v-if="currentLoginType === 'mobile'"></mobile-login>

      <account-login v-else-if="currentLoginType === 'account'"></account-login>

      <el-row class="main-container__links" type="flex" justify="space-between">
        <router-link :to="{name: 'forget-password'}" class="main-container__link">
          <svg-icon icon-class="arrow-right" type="primary" :stroke="true" :reverse="true"></svg-icon>
          忘记密码？
        </router-link>
        <router-link :to="{name: 'register'}" class="main-container__link hidden">
          去注册
          <svg-icon icon-class="arrow-right" type="primary" :stroke="true"></svg-icon>
        </router-link>
      </el-row>
    </div>
    <div class="main-container__footer">
      <customer-service class="main-container__footer-custom">
        <svg-icon icon-class="login-customer-service" type="primary"></svg-icon>7*24小时在线客服
      </customer-service>
    </div>
  </div>
</template>

<script>

  import MobileLogin from './mobile-login';
  import AccountLogin from './account-login';
  import CustomerService from "@/components/customer-service/index";

  export default {
    name: "login-view",

    components: {
      CustomerService,
      MobileLogin,
      AccountLogin,
    },

    data() {
      return {
        currentLoginType: 'account',
      };
    },
  };
</script>

